<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<body>
    <div id="app">
        <div class="container">
            <nav>
                <router-link to="/index">主页</router-link>
                <router-link to="/add">添加</router-link>
            </nav>
            <router-view>

            </router-view>
        </div>
    </div>
    <script>
        const router = new VueRouter({
            routes: [
                {
                    path: '/index', component: {
                        template: `
                    <div>
                        首页
                    </div>
                    `
                    }
                },
                {
                    path: '/add', component: {
                        template: `
                    <div>
                        <form class="form-inline">
                            <input type="text" class="form-control" v-model.trim="assets.name" placeholder="资产名称">
                            <input type="text" class="form-control" v-model.number="assets.price" placeholder="资产价格">
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <button class="btn btn-primary" @click.prevent="add">添加资产</button>
                        </form>
                    </div>
                    `,
                        data() {
                            return {
                                asset: {
                                    name: '',
                                    price: ''
                                }
                            }
                        },
                        methods: {
                            // 用户点击了添加按钮 
                            hAdd() {
                                console.log(this.asset)
                                // 1. 解构赋值
                                const { name, price } = this.asset

                                // 2. if (用户的输入不合法，提示一下用户
                                if (name === '') {
                                    alert('名字不能为空')
                                    return
                                }

                                if (price <= 0) {
                                    alert('价格不能是负数')
                                    return
                                }
                                // 3. 发请求
                                axios({
                                    method: 'POST',
                                    url: 'http://localhost:3000/assets',
                                    data: {
                                        name: name,
                                        price: price
                                    }
                                }).then(res => {
                                    console.log('添加成功')

                                    // 2. 清空表单数据
                                    this.asset.name = ''
                                    this.asset.price = ''

                                    // 3. 跳转到主页
                                    this.$router.push('/')
                                })
                            }
                        }
                    }
                }
            ]
        })
        new Vue({
            el: '#app',
            router: router
        })
    </script>
</body>

</html>